<template>
  <div class="main-design-area">
    <div class="pc" >
      <el-form
        :label-position="store.root.config.labelPosition"
        :label-width="store.root.config.labelWidth + 'px'"
        :model="store.models"
      >
        <transition-group tag="div" name="fade-transform" mode="out-in">
          <div class="white-domain" v-if="exchange" key="white-domain">
            <draggable
              v-model="store.root.list"
              handle=".mover"
              @add="handleAdd($event)"
              class="draggable"
              group="site"
              animation="100"
              dragClass="dragClass"
              ghostClass="ghostClass"
              chosenClass="chosenClass"
            >
              <transition-group tag="div">
                <template v-for="(el, i) in store.root.list">
                  <widget
                    v-if="el"
                    :element="el"
                    :index="i"
                    :store="store"
                    :key="el.key"
                    :data.sync="store.root.list"
                  ></widget>
                </template>
              </transition-group>
            </draggable>
          </div>
          <div class="black-domain" v-else key="black-domain">
            <draggable
              v-model="store.root.blackList"
              handle=".mover"
              @add="blackhandleAdd($event)"
              class="draggable"
              group="hidden"
              animation="100"
              dragClass="dragClass"
              ghostClass="ghostClass"
              chosenClass="chosenClass"
            >
              <transition-group tag="div">
                <template v-for="(el, i) in store.root.blackList">
                  <widget
                    v-if="el"
                    :element="el"
                    :index="i"
                    :store="store"
                    :key="el.key"
                    :data.sync="store.root.blackList"
                  ></widget>
                </template>
              </transition-group>
            </draggable>
          </div>
        </transition-group>
      </el-form>
    </div>
  </div>
</template>

<script>
import { compiler } from "@/low-code/utils/compiler";
import Draggable from "vuedraggable";
import clone from "clone";
export default {
  inject: ["getStore",  "getPcStore", "getMobileStore","getImportEditor"],
  props: ["exchange"],
  components: {
    Draggable,
  },
  data() {
    return {
      compiler: compiler,
    };
  },
  computed: {
    store() {
      return this.getStore();
    },
  },
  methods: {
    pcToMobile() {
      let store = JSON.parse(this.getPcStore());
      console.log("root", store);
      store.root.list = this.compiler.pcToMobile(store.root).list;
       this.getImportEditor()( JSON.stringify(store) )
    },
    handleAdd(evt) {
      const newIndex = evt.newIndex;
      this.$set(
        this.store.root.list,
        newIndex,
        this.store.generateComponent({
          ...clone(this.store.root.list[newIndex]),
        })
      );
      this.store.current = this.store.root.list[newIndex];
      this.$handleStack.push(clone(this.store.root));
    },
    blackhandleAdd(evt) {
      const newIndex = evt.newIndex;
      // const to = evt.to
      //为拖拽到容器的元素添加唯一 key
      console.log("需要删除的key", this.store.root.blackList[newIndex].key);
      if (this.store.root.blackList[newIndex].key) {
        this.store.delComponentMap(this.store.root.blackList[newIndex]);
      }

      this.$set(
        this.store.root.blackList,
        newIndex,
        this.store.generateComponent({
          ...clone(this.store.root.blackList[newIndex]),
        })
      );
      this.store.current = this.store.root.blackList[newIndex];
      this.$handleStack.push(clone(this.store.root));
    },
  },
};
</script>

<style lang="scss" scoped>
.draggable > div {
  min-height: 500px;
  display: block;
}

/* 整个滚动条背景 */
::-webkit-scrollbar {
  width: 2px;
  height: 12px;
  // background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
  width: 15px;
  /* 上下两头给个圆角 */
  background-color: #dbdbdb;
  border-radius: 10px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(228, 228, 228, 0.568);
}

.mobile {
  width: 375px;
  margin: 0 auto;
  box-shadow: 0 0 9px 5px #eee;
  position: relative;
}

.pcToMobile {
  position: absolute;
  right: -160px;
  top: 30px;
  width: 150px;
  cursor: pointer;
  color: #2aa0fa;
}
</style>